<template>
  <div class="layer-page-container">
    <!-- 顶部导航浮动容器 -->
    <div class="float-container">
      <!-- 顶部导航过渡容器 -->
      <transition name="header">
        <!-- 顶部导航容器 -->
        <div v-show="isShowHeader" class="header-container">
          <!-- 返回键 -->
          <div class="go-back" @click="goHome">
            <img width="100%" src="@/assets/book-close.png">
          </div>
          <!-- 效果切换按钮 -->
          <div class="go-back" @click="swtichMiva">
            <img width="100%" src="@/assets/book.png">
          </div>
          <!-- 置顶键 -->
          <div class="go-back" @click="goTop">
            <img width="100%" src="@/assets/goTop.png">
          </div>
        </div>
      </transition>
      <div class="header-switch-btn" @click="switchHeader">
        <img src="@/assets/jiaobiao.png">
      </div>
    </div>
    <!-- 页面容器 -->
    <div class="page-container">
      <!-- 抬头 -->
      <div class="KujoMiva">
        展示 Exhibition
        <span style="font-size: 12px">(标题可拖动查看)</span>
      </div>
      <!-- 页面 -->
      <router-view />
      <!-- 版权 -->
      <div class="copy">
        - &copy;
        <!-- 项目已暂停维护 -->
        <!-- <span class="copy-miva">KUJOMIVA</span>, powered by -->
        <span class="company">有安米互动</span> 2019 -
      </div>
    </div>
  </div>
</template>

<script>
// const { log } = console
export default {
  data() {
    return {
      isShowHeader: true,
      timer: null,
      timerTop: null
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      if (this.isShowHeader) {
        this.isShowHeader = false
      }
    }, 1000 * 2)
  },
  destroyed() {
    clearTimeout(this.timer)
  },
  methods: {
    switchHeader() {
      this.isShowHeader = !this.isShowHeader
      clearTimeout(this.timer)
    },
    swtichMiva() {
      this.isShowHeader = !this.isShowHeader
      this.$store.commit('TOOGELMIVASHOW')
    },
    goHome() {
      this.$router.goBack()
    },
    goTop() {
      const miva = this
      const view = document.querySelector('#app')
      cancelAnimationFrame(miva.timerTop)
      miva.timerTop = requestAnimationFrame(handler)
      function handler() {
        const viewTop = view.scrollTop
        if (viewTop <= 0) {
          return cancelAnimationFrame(miva.timerTop)
        }
        view.scrollTop = viewTop - 150
        miva.timerTop = requestAnimationFrame(handler)
      }
    }
  }
}
</script>

<style lang="scss">
.page-image {
  padding-bottom: 100px;
}
</style>

<style lang="scss" scoped>
.header-enter-active,
.header-leave-active {
  transition: all 0.3s;
}
.header-enter,
.header-leave-to {
  height: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  // opacity: 0;
}
</style>

<style lang="scss" scoped>
.layer-page-container {
  min-height: calc(100vh);
  position: absolute;
  top: 0;
  background-color: #f7f6e9;
  .float-container {
    width: 100%;
    max-width: 640px;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 748943849;
    transform: translateX(-50%);
  }
  .header-container {
    height: 55px;
    padding: 10px 50px;
    border-bottom: 2px solid #dddcd1;
    // border-bottom: 2px solid #2e404e;
    overflow: hidden;
    background-color: #2e404e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #cfa23e;
    .go-back {
      width: 25px;
    }
  }
  .header-switch-btn {
    width: 100%;
    height: 55px;
    position: relative;
    z-index: 748943649;
    // pointer-events: click;
    pointer-events: none;
    img {
      width: 40px;
      position: absolute;
      top: -6px;
      right: 6px;
      pointer-events: initial;
    }
  }
  .page-container {
    position: relative;
    padding: 50px 10px 0;
    margin-top: 45px;
    .KujoMiva {
      position: absolute;
      top: 0;
      padding: 5px;
      margin-top: 10px;
      border-bottom: 2px solid #dddcd1;
      font-weight: bold;
    }
    .copy {
      margin: 50px 0;
      text-align: center;
      font-size: 12px;
      opacity: 0.4;
    }
    .copy-miva {
      font-family: "KujoMiva";
    }
    .company {
      padding: 5px;
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
    }
  }
}
</style>
